<template>
	<view class="zy-row-wrap">
		<view class="zy-row zy-btn-black-capsule zy-mr-sm zy-mt-sm" v-for="(item, index) in totalList" :key="index" @click="onItemClick(item, index)">
			<view class="zy-text-yellow-light-lg tag-yellow">{{item.name}}</view>
			<image class="zy-icon-sm zy-ml-sm" mode="widthFix" :src="getImageUrl('close_white.png')" v-if="close"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zy-tag",
		data() {
			return {
				tagColor: ['tag-blue', 'tag-green', 'tag-yellow', 'tag-pink'],
			};
		},
		props:{
			close: {
				type: Boolean,
				default(){
					return false;
				}
			},
			add: {
				type: Boolean,
				default(){
					return false;
				}
			},
			list:{
				type: Array,
				default(){
					return []
				}
			}
		},
		computed: {
			totalList: function () {
				if(this.add){
					let flag = true;
					this.list.forEach(item=>{
						if(item.name == '+标签'){
							flag = false;
						}
					})
					if(flag){
						this.list.unshift({
							name: '+标签',
							add: true
						})
					}
				}
				return this.list
			}
		},
		 // beforeCreate(){
			//  console.log("beforeCreate: " + JSON.stringify('beforeCreate'));
			//  if(this.add){
			// 	 this.list.unshift({
			// 	 	name: '+标签',
			// 		add: true
			// 	 })
			//  }
		 // },
		 // updated(){
			//  console.log("updated: " + JSON.stringify('updated'));
			//  if(this.add){
			//  				 this.list.unshift({
			//  				 	name: '+标签',
			//  					add: true
			//  				 })
			//  }
		 // },
		 methods:{
			 onItemClick(item, index){
				if(item.add) {
					this.$emit('add')
				}
				if(this.close){
					item.index = index;
					this.$emit('remove', item)
				}else{
					item.index = index;
					this.$emit('click', item)
				}
			 }
		 }
		// computed:{
		// 	getList(){
		// 		if(add){
		// 			list.push({
		// 				type: 0,
		// 				text: 'add+'
		// 			})
		// 		}
		// 		return list;
		// 	}
		// }
	}
</script>

<style lang="scss">
	.tag-blue {
		color: #5999e3;
	}

	.tag-green {
		color: #2ac2a9;
	}

	.tag-yellow {
		color: #F9E791;
	}

	.tag-pink {
		color: #da6377;
	}
</style>